<template>
    <Modal
            v-model="modal"
            :title="title" width='80%' class-name='view-print'>
        <div  style="height:100%">
            <div class="m-b-sm">
                <button class="btn btn-sm btn-primary" @click='previewChange("pc",$event)'><i class="fa fa-window-maximize m-r-sm"></i>电脑端</button>
                <button class="btn btn-sm btn-primary" @click='previewChange("mobile",$event)'><i class="fa fa-mobile m-r-sm"></i>手机端</button>
            </div>
            <iframe ref='htmlPreview' class="iframe_page" :class='previewType'></iframe>
        </div>
        <div slot="footer">
            <Button type="ghost" @click='cancel'>关闭</Button>
        </div>
    </Modal>
</template>
<style lang="less">
    @bodyHeight:600px;
    .view-print{
        .ivu-modal{
            .ivu-modal-body{
                height: @bodyHeight;
                box-sizing: border-box;
            }
        }
        .iframe_page{
            box-sizing: border-box;
            border: #858585 solid 1px;
            display: block;
            margin:0 auto;
            padding:0;
            width:100%;
            height:@bodyHeight - 60;
            overflow-x:auto ;
            &.pc{
                transition: all 0.5s ease 0s;
            }
            &.mobile{
                height: 540px;
                width: 337px;
                transition: all 0.5s ease 0s;
                overflow-x:auto ;
            }
        }
    }
</style>
<script>
    export default{
        name:'CPagePreview',
        props:{
            pTitle:String,
        },
        data () {
            return {
                modal: false,
                previewType: 'pc',
            }
        },
        computed:{
            title(){
                return this.pTitle||'预览'
            }
        },
        methods: {
            previewChange(type){
                this.$set(this,'previewType',type);
            },
            handleOpen(data){
                this.setIframe(data);
                this.$set(this,'modal',true);
            },
            cancel () {
                this.$set(this,'modal',false);
                const doc = this.$refs['htmlPreview'].contentDocument;
                const body = doc.body;
                body.innerHTML = '';
                this.$emit('on-cancel')
            },
            async setIframe(info){
                var html_base = info ;
                const doc = this.$refs['htmlPreview'].contentDocument;
                const body = doc.body;
                body.innerHTML = html_base;
            },
            printChange(){
                this.$refs['htmlPreview'].contentWindow.print();
            }
        },
        components:{
        }
    }
</script>